<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			div{
				position: absolute;
				left: 320px;
				top: 20%;
			}
			td{
				text-align: center;
			}
			tr:hover{
				background-color: aqua;
			}
		</style>
		<script>
			if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp = new XMLHttpRequest();
			} else { // code for IE6, IE5
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.open("GET", "cd.xml", false);
			xmlhttp.send();
			xmlDoc = xmlhttp.responseXML;
			x = xmlDoc.getElementsByTagName("CD");

			function displayCDInfo(i) {
				artist = (x[i].getElementsByTagName("ARTIST")[0].innerHTML);
				title = (x[i].getElementsByTagName("TITLE")[0].innerHTML);
				year = (x[i].getElementsByTagName("YEAR")[0].innerHTML);
				country = (x[i].getElementsByTagName("COUNTRY")[0].innerHTML);
				company = (x[i].getElementsByTagName("COMPANY")[0].innerHTML);
				price = (x[i].getElementsByTagName("PRICE")[0].innerHTML);
				txt = "Artist: " + artist + "<br>Title: " + title + "<br>Year: " + year + "<br>Country: " + country + "<br>Company: " + company + "<br>Price: " + price;
				document.getElementById("showCD").innerHTML = txt;
			}
		</script>
	</head>

	<body>
		<div id='showCD'>Click on a CD to display album information.</div><br>
		<script>
			document.write("<table border='1'><tr><th>ARTIST</th><th>TITLE</th></tr>");
			for(var i = 0; i < x.length; i++) {
				document.write("<tr onmousemove='displayCDInfo(" + i + ")'><td>");
				document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
				document.write("</td><td>");
				document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
				document.write("</td></tr>");
			}
			document.write("</table>");
		</script>

	</body>

</html>